$(document).ready(function() {
	var lastsel;
	$("#crudReceiptDetailsTable").jqGrid({
		url : 'rec/viewReceiptItemDetails',
		postData : {
			receiptId : $("#receiptId").val()
		},
		editurl : 'rec/saveReceiptItem',
		datatype : "json",
		colNames : ['ID', 'Item ID', 'Name', 'Category', 'Price'],
		colModel : [{
			name : 'id',
			index : 'id',
			editable : false,
			editoptions : {
				readonly : true,
				size : 10
			},
			hidden : true
		}, {
			name : 'itemId',
			index : 'itemId',
			editable : true,
			edittype : 'text',
			editrules : {
				required : true
			},
			editoptions : {
				maxlength : "30"
			}
		}, {
			name : 'receiptItemName',
			index : 'receiptItemName',
			editable : true,
			edittype : 'text',
			editrules : {
				required : true
			},
			editoptions : {
				maxlength : "30"
			}
		}, {
			name : 'receiptItemCategory.value',
			index : 'receiptItemCategory.value',
			editable : true,
			editrules : {
				required : true
			},
			'edittype' : 'custom',
			'editoptions' : {
				'custom_element' : autocomplete_element,
				'custom_value' : autocomplete_value
			}
		}, {
			name : 'price',
			index : 'price',
			formatter : 'number',
			editable : true,
			editrules : {
				required : true,
				number : true
			},
			edittype : 'text',
			editoptions : {
				maxlength : "30"
			}
		}
		],
		pager : '#receiptItemPager',
		rowNum : 10,
		rowList : [10, 20, 30],
		sortname : 'id',
		width : 800,
		height : 320,
		sortorder : 'desc',
		viewrecords : true,
		emptyrecords : 'No Records found',
		gridview : true,
		jsonReader : {
			repeatitems : false
		},
		onSelectRow : function(id) {
			/*
			var hiddenfieldObject = $("#" + id + "_" + "receiptIdHidden");
						alert("hiddenfieldObject with default value : " + hiddenfieldObject.val());*/
			
			if(id && id !== lastsel) {
				$('#crudReceiptDetailsTable').restoreRow(lastsel);
				lastsel = id;
			}
			$('#crudReceiptDetailsTable').editRow(id, true);
		},
		caption : 'Receipt Item'
	});

	$("#crudReceiptDetailsTable").jqGrid('navGrid', '#receiptItemPager', {
		edit : false,
		add : false,
		del : true,
		deltitle : "Delete selected row",
		search : false
	}, {}, {}, {
		url : 'rec/deleteReceiptItem'
	});
	$("#crudReceiptDetailsTable").jqGrid('inlineNav', '#receiptItemPager', {
		edit : false,
		editicon : "ui-icon-pencil",
		add : false,
		addicon : "ui-icon-plus",
		save : false,
		saveicon : "ui-icon-disk",
		cancel : false,
		cancelicon : "ui-icon-cancel",
		addParams : {
			useFormatter : false
		},
		editParams : {
		}
	});

	$("#crudReceiptDetailsTable").navButtonAdd('#receiptItemPager', {
		caption : "New",
		title : "Click here to add new record",
		buttonicon : "ui-icon-plusthick",
		onClickButton : function() {
			$("#crudReceiptDetailsTable").jqGrid('addRow', null);
		},
		position : "first"
	});
	$("#crudReceiptDetailsTable").navButtonAdd('#receiptItemPager', {
		caption : "Save",
		title : "Click here to save record",
		buttonicon : "ui-icon-disk",
		onClickButton : function() {
			alert('before setting save params');
			var receiptID = $("#receiptId").val();
			alert('receiptID : ' + receiptID);
			saveparameters = {
				"successfunc" : null,
				"url" : "rec/saveReceiptItem",
				"extraparam" : {receiptIdHidden:receiptID},
				"aftersavefunc" : null,
				"errorfunc" : null,
				"afterrestorefunc" : null,
				"restoreAfterError" : true,
				"mtype" : "POST"
			};
			alert('after setting save params');
			var rowid = $("#crudReceiptDetailsTable").jqGrid('getGridParam', 'selrow');
			alert('rowid : ' + rowid);
			$("#crudReceiptDetailsTable").jqGrid('saveRow', rowid, saveparameters);
/*
			$("#crudReceiptDetailsTable").setGridParam({url:'rec/viewReceiptItemDetails?receiptId='+receiptID}); 
			$("#crudReceiptDetailsTable").trigger("reloadGrid");*/
		},
		position : "second"
	});

	function succesfunc() {
		alert('succesfunc');
	}

	function aftersavefunc() {
		alert('aftersavefunc');
	}

	function errorfunc() {
		alert('errorfunc');
	}

	// this function de-selects all previously accessed rows
	function autocomplete_element(value, options) {
		// creating input element
		var $ac = $('<input type="text"/>');
		// setting value to the one passed from jqGrid
		$ac.val(value);
		// creating autocomplete
		$ac.autocomplete({
			source : "itemCategory/searchItemCategories",
			select : function(event, ui) {
				alert('selected a id: ' + ui.item.id + 'value : ' + value + 'options : ' + options);

			}
		});
		// returning element back to jqGrid
		return $ac;
	};

	function autocomplete_value(elem, op, value) {
		if(op == "set") {
			$(elem).val(value);
		}
		return $(elem).val();
	};

});
